<template>
	<div class="page">
		<Header :title="'首页'" />

		<div class="banner">
			<Banner />
		</div>

		<Notice :noticeData="noticeData" />

		<BackTop />

		<div class="list">
			<ul>
				<li v-for="(item, index) in dataList">
					<div class="li-item">
						<span>{{ item }}</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Swiper from '@mall/assets/plugins/swiper5.3.0/swiper.min.js';
	import '@mall/assets/plugins/swiper5.3.0/swiper.min.css';
	import Header from './components/header/index.vue';
	import Banner from './components/banner/index.vue';
	import Notice from './components/notice/index.vue';
	import BackTop from './components/backTop/index.vue';

	export default {
		data() {
			return {
				dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
				bannerList: [1, 2, 3, 4],
				noticeData: [{
					activityDescription: '今天星期五了，明天不上班！今天星期五了，明天不上班！今天星期五了，明天不上班！今天星期五了，明天不上班！今天星期五了，明天不上班！'
				}]
			};
		},
		computed: {},
		components: {
			Banner,
			Header,
			Notice,
			BackTop
		},
		watch: {},
		created() {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				let pEl = '';
				let isLoop = false;
				let isAutoplay = false;
				if (this.bannerList.length > 1) {
					isLoop = true;
					isAutoplay = {
						delay: 3000, //轮播时间间隔(毫秒)
						disableOnInteraction: false
					};
					pEl = '.swiper-pagination';
				}

				let mySwiper = new Swiper('.swiper-container', {
					loop: isLoop, //是否可以滑动
					autoplay: isAutoplay, //是否自动轮播
					pagination: {
						el: pEl, //分页器设置
						clickable: true
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@mall/assets/css/common';

	.page {
		height: 100%;
		padding: rem(90) 0 0 0;
		background: #f8f8f8;

		.banner {
			background: #eee;
		}

		.list {
			margin: rem(20) 0 0 0;
			padding: 0 0 rem(200) 0;

			ul {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 0 rem(20);
			}

			li {
				width: 50%;
				padding-bottom: rem(20);

				&:nth-child(odd) {
					padding-right: rem(10);
				}

				&:nth-child(even) {
					padding-left: rem(10);
				}

				.li-item {
					background: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: rem(10);
					border-radius: rem(10);
					min-height: rem(400);

					// box-shadow: rem(1) rem(1) rem(16) #eee;
					span {
						font-size: rem(36);
					}
				}
			}
		}
	}
</style>
